<script>

export default {
  name: "animatePage",
  data(){
    return {
      flag:true,
      list:[
          1,2,3,4
      ]
    }
  },
  methods:{
    beforeEnter(el) { // 动画进入之前的回调
      el.style.transform = 'translateX(500px)';
    },
    enter(el, done) { // 动画进入完成时候的回调
      el.offsetWidth;
      el.style.transform = 'translateX(0px)';
      done();
    },
    afterEnter(el) { // 动画进入完成之后的回调
      this.flag = !this.flag;
      console.log(el)
    },
    add(){
        // this.list.push(5)
      this.list.pop()
    }
  }
}
</script>

<template>
<div>
  <router-view></router-view>
  动画
  <button @click="flag=!flag">点击显示</button>
<!--  <transition>-->
<!--    <div class="box" v-show="!flag">这是元素</div>-->
<!--  </transition>-->

<!-- 类名：.自定义动画名-enter  .ani-enter -->
<!--  <transition name="ani">-->
<!--    <div class="box" v-show="!flag">这是元素ani</div>-->
<!--  </transition>-->

<!--  animate.css-->
  <transition
      name="custom-classes-transition"
      enter-active-class="animate__animated animate__fadeInUpBig"
      leave-active-class="animate__animated animate__zoomOutUp"
  >
    <p v-if="!flag">hello</p>
  </transition>


<!-- 函数形式-->
  <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
    <div v-if="!flag" class="show">OK</div>
  </transition>


<!--  列表过渡-->
  <button @click="add">add</button>
  <transition-group>
   <p v-for="(item,index) in  list" :key="index">{{item}}</p>
  </transition-group>


</div>
</template>

<style scoped lang="less">
.box {
  width: 300px;
  height: 200px;
  background-color: red;
}
.v-enter {
  transform: translateX(-300px);
}
.v-enter-to {
  transform: translateX(0);
}
.v-enter-active {
  transition: transform 3s;
}
.v-leave {
  transform: translateX(0px) rotate(0deg);
}
.v-leave-to {
  transform: translateX(300px) rotate(360deg);
}
.v-leave-active {
  transition: transform 4s;
}
.ani-enter {
  transform: translateX(-300px) scale(1.5,1.5);
}
.ani-enter-to {
  transform: translateX(0px) scale(1,1);
}
.ani-enter-active {
  transition: transform 4s;
}
.ani-leave {
  transform: translateX(0px) rotate(0deg);
}
.ani-leave-to {
  transform: translateX(300px) rotate(360deg);
}
.ani-leave-active {
  transition: transform 2s;
}
</style>